<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
					<el-option key="1" label="广东省" value="广东省"></el-option>
					<el-option key="2" label="湖南省" value="湖南省"></el-option>
				</el-select>
				<el-select v-model="query.state" placeholder="状态" class="handle-select mr10">
					<el-option key="1" label="成功" value="成功"></el-option>
					<el-option key="2" label="失败" value="失败"></el-option>
				</el-select>
				<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus" class="mr10" @click="addFn">新增</el-button>
				<el-button type="primary" :icon="Refresh" class="mr10" @click="resetFn">重置</el-button>


				<el-upload action="#" :limit="1" accept=".xlsx, .xls" :show-file-list="false" :before-upload="beforeUpload"
					class="mr10" :http-request="handleMany">
					<el-button type="success" :icon="Download">批量导入</el-button>
				</el-upload>

				<el-button type="warning" @click="exportXlsx" :icon="Upload">导出Excel</el-button>


			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="用户名"></el-table-column>
				<el-table-column label="账户余额">
					<template #default="scope">￥{{ scope.row.money }}</template>
				</el-table-column>
				<!-- <el-table-column label="头像(查看大图)" align="center">
					<template #default="scope">
						<el-image class="table-td-thumb" :src="scope.row.thumb" :z-index="10"
							:preview-src-list="[scope.row.thumb]" preview-teleported>
						</el-image>
					</template>
				</el-table-column> -->
				<el-table-column prop="address" label="地址"></el-table-column>
				<el-table-column label="状态" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.state === '成功' ? 'success' : scope.row.state === '失败' ? 'danger' : ''">
							{{ scope.row.state }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="date" label="注册时间"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" class="editStyle" @click="handleEdit(scope.$index, scope.row)"
							v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="deleteStyle" @click="handleDelete(scope.$index)"
							v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="dialogType === 'add' ? '新增' : '编辑'" v-model="dialogFormVisible" width="30%">
			<el-form label-width="100px" :model="tableForm">
				<el-form-item label="用户名:">
					<el-input v-model="tableForm.name" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="账户余额:">
					<el-input v-model="tableForm.money" placeholder="请输入账户余额"></el-input>
				</el-form-item>
				<el-form-item label="地址:">
					<el-input v-model="tableForm.address" placeholder="请输入地址"></el-input>
				</el-form-item>
				<el-form-item label="状态:">
					<el-select v-model="tableForm.state" placeholder="请选择状态">
						<el-option label="成功" value="成功" />
						<el-option label="失败" value="失败" />
					</el-select>
				</el-form-item>
				<el-form-item label="注册时间:">
					<el-date-picker v-model="tableForm.date" type="date" value-format="YYYY-MM-DD" placeholder="选择注册时间" 
						style="width: 100%" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox, UploadProps } from 'element-plus';
import { Delete, Edit, Search, Plus, Upload, Download, Refresh } from '@element-plus/icons-vue';
import { fetchData } from '../api/index';
import * as XLSX from 'xlsx';

interface TableItem {
	id: number;
	name: string;
	money: string;
	state: string;
	date: string;
	address: string;
}

const query = reactive({
	address: '',
	name: '',
	state: '',
	pageIndex: 1,
	pageSize: 10
});
// 弹窗
const dialogFormVisible = ref(false);
const tableForm = ref({});
const dialogType = ref('add');


const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	fetchData().then(res => {
		tableData.value = res.data.list;
		pageTotal.value = res.data.pageTotal || 50;
		console.log('tableData.value', tableData.value)
	});
};
getData();

// 导入功能
const importList = ref<any>([]);
const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => {
	importList.value = await analysisExcel(rawFile);
	return true;
};
const analysisExcel = (file: any) => {
	return new Promise(function (resolve, reject) {
		const reader = new FileReader();
		reader.onload = function (e: any) {
			const data = e.target.result;
			let datajson = XLSX.read(data, {
				type: 'binary',
			});

			const sheetName = datajson.SheetNames[0];
			const result = XLSX.utils.sheet_to_json(datajson.Sheets[sheetName]);
			resolve(result);
		};
		reader.readAsBinaryString(file);
	});
};

const handleMany = async () => {
	// 把数据传给服务器后获取最新列表，这里只是示例，不做请求
	const list = importList.value.map((item: any, index: number) => {
		return {
			id: index,
			name: item['用户名'],
			money: item['账户余额'],
			address: item['地址'],
			state: item['状态'],
			date: item['注册时间'],
		};
	});
	tableData.value.push(...list);
};

// 导出功能
const exportList = [['ID', '用户名', '账户余额', '地址', '状态', '注册时间',]];
const exportXlsx = () => {
	tableData.value.map((item: any, i: number) => {
		const arr: any[] = [i + 1];
		arr.push(...[item.name, item.money, item.address, item.state, item.date,]);
		exportList.push(arr);
	});
	let WorkSheet = XLSX.utils.aoa_to_sheet(exportList);
	let new_workbook = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
	XLSX.writeFile(new_workbook, `导出表格.xlsx`);
};

// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
// 新增功能
const addFn = () => {
	tableForm.value = {}
	dialogType.value = "add"
	dialogFormVisible.value = true
}

// 重置功能
const resetFn = () => {
	tableData.value = [...tableData.value]
}

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			ElMessage.success('删除成功');
			tableData.value.splice(index, 1);
			getData();
		})
		.catch(() => { });
};

// 表格编辑
let idx: number = -1
const handleEdit = (index: number, row: any) => {
	tableForm.value = row
	dialogType.value = "edit"
	dialogFormVisible.value = true
};

// 保存信息
const saveEdit = () => {
	if (dialogType.value === 'add') {
		tableData.value.push({
			id: tableData.value.length + 1,
			...tableForm.value
		})
		ElMessage.success(`新增成功`);
	} else {
		let index = tableData.value.findIndex(item => item.id === tableForm.id);
		tableData[index] = tableForm
		ElMessage.success(`编辑成功`);
	}
	dialogFormVisible.value = false
};

// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};


</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.editStyle {
	color: #67C23A;
}

.deleteStyle {
	color: #F56C6C;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
